<template>
    <div>
        <group title="">
            <divider>方式一:</divider>            
            <img style="width:100%; padding: 0 10%" :src="wxqun" />
            <divider>方式二:</divider>
            <x-input title="联系方式" v-model="email" placeholder-align="right" placeholder="邮箱或电话"></x-input>
            <x-textarea title=""  v-model="content" autosize  :max="200" placeholder="您的意见,也可直接发送到邮箱5526555@qq.com" :rows="3"></x-textarea>
            <uploader :max="varmax" :images="images" :handle-click="true" :show-header="true" :readonly="false" :autoUpload="false" title="" :showHeader="false" size="normal" @preview="previewMethod" @add-image="addImageMethod" @remove-image="removeImageMethod"></uploader>
        </group>
        <div v-transfer-dom>
            <previewer :list="showImgs" ref="previewer" :options="options"></previewer>
        </div>
        <div style="padding:15px;">
            <x-button type="primary" @click.native="doSend">提交</x-button>
        </div>
        <div style="display:none">
            <input id="photoBtn" type="file" accept="image/*" ref="files" v-on:change="showPreview" />
        </div>
    </div>
</template>
<script>
import {
    TransferDom,Previewer,XTextarea,XInput,Group,XButton,Divider,
} from 'vux'
import Uploader from 'vux-uploader'
import Vue from 'vue'
import api from '../api';

export default {
    directives: {
        TransferDom
    },
    components: {
        Uploader,Previewer,XTextarea,XInput,Group,XButton,Divider,
    },
    mounted: function() {

    },
    updated: function() {

    },
    methods: {
        showPreview(evt) {
            let _this = this;
            var source = evt.currentTarget;
            var file = source.files[0];
            if (file == undefined) { //取消选择.
                return;
            }
            if (window.FileReader) {
                var fr = new FileReader();
                fr.onloadend = function(e) {
                    // document.getElementById("thridBg").src = e.target.result ;                    
                    // $('.hideImg').attr("src" , e.target.result )  ;
                    // imgBaseStr = e.target.result.substring(23) ;
                    _this.images.push({
                        url: e.target.result
                    });
                };
                fr.readAsDataURL(file);
            }
        },
        previewMethod({
            url
        }) {
            return;
            console.log("预览图片" + url);
            let index;
            for (let i = 0; i < this.showImgs.length; i++) {
                if (this.showImgs[i].src == url) {
                    index = i;
                    break;
                }
            }
            this.$refs.previewer.show(index);
        },
        addImageMethod() {
            console.log("新增图片...");
            let _this = this;
            document.querySelector('#photoBtn').click();
            this.$refs.files.click();
            return;
            wx.chooseImage({
                success: (res) => {
                    _this.uploadImg.localId = res.localIds;
                    _this.$vux.toast.show({
                        text: '已选择 ' + res.localIds.length + ' 张图片'
                    });
                    res.localIds.forEach((item, index) => {
                        _this.images.push({
                            url: item
                        });
                        _this.showImgs.push({
                            src: item,
                            w: 800,
                            h: 400
                        });
                    })
                }
            })
        },
        removeImageMethod() {
            console.log("删除图片...");
            this.images.pop();
            this.showImgs.pop();
        },
        doSend(){
            if(this.email.length ==0) return this.$vux.toast.show({text:"请填联系方式",type: 'warn'});
            if( !this.isMob(this.email) && !this.isEmail(this.email))
            return this.$vux.toast.show({text:"联系方式错误",type: 'warn'});
            if(this.content.length ==0) return this.$vux.toast.show({text:"请填建议",type: 'warn'});
            

            let sdata = { email: this.email ,content:this.content ,imgs: this.images};
            api.suggestAdd(sdata).then((data)=>{
                if(data.errno >0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});                
                this.content = "" ;
                // this.email = "" ;
                this.images= [];
                this.showImgs= [];
                this.$vux.toast.show({text:"提交成功",type: 'success'});
            },(data)=>{
                
            })

        },
    },
    data() {
        return {
            wxqun:"https://7dtime.com/static/z39h5/wxqun.jpg?v=" + moment().format("YYYY-MM-DD"),
            email:"",
            content:"",
            uploadImg: {
                localId: [],
                serverId: []
            },
            images: [], //图片地址存储的数组
            showImgs: [], //预览图片的数组
            uploadUrl: `${api.globalUrl}/apix/z39base/upload`, //上传到后端服务器的地址
            varmax: 10,
            options: {
                getThumbBoundsFn(index) {
                    let thumbnail = document.querySelectorAll('.weui-uploader__files .weui-uploader__file')[index];
                    // console.log(thumbnail, index);
                    let pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
                    let rect = thumbnail.getBoundingClientRect();
                    return {
                        x: rect.left,
                        y: rect.top + pageYScroll,
                        w: rect.width
                    };
                    // Good guide on how to get element coordinates:
                    // http://javascript.info/tutorial/coordinates
                }
            }
        }
    }
}
</script>
<style scoped>

</style>
